<template>
  <view class="channel">
    <view class="head">
      <view class="flex">
        <view class="flex w-50">
          <span class="title-border">关注：</span>
          <uv-text
            type="primary"
            size="14"
            :text="`${channelInfoData.authcount} 人`"
          ></uv-text>
        </view>
        <view class="flex w-50">
          <span class="title-border">注册：</span>
          <uv-text
            type="primary"
            size="14"
            :text="`${channelInfoData.joincount} 人`"
          ></uv-text>
        </view>
      </view>

      <view class="flex">
        <view class="flex w-50">
          <span class="title-border">单量：</span>
          <uv-text
            type="primary"
            size="14"
            :text="`${channelInfoData.ordercount} 单`"
          ></uv-text>
        </view>
        <view class="flex w-50">
          <span class="title-border">流水：</span>
          <uv-text
            type="primary"
            size="14"
            :text="`${channelInfoData.ordermoney} ￥`"
          ></uv-text>
        </view>
      </view>
    </view>
    <view class="conetnt">
      <view class="table">
        <uv-tabs
          :list="list"
          style="flex: 1"
          :current="tabCurrent"
          :scrollable="false"
          @change="changeTab"
        >
        </uv-tabs>
        <UserList v-if="tabCurrent === 0" :channelID="channelID"></UserList>
        <OrderList v-if="tabCurrent === 1" :channelID="channelID"></OrderList>
      </view>
    </view>
  </view>
</template>

<script>
import UserList from "./user-list.vue";
import OrderList from "./order-list.vue";
export default {
  data() {
    return {
      channelID: "",
      tabCurrent: 0,
      channelInfoData: {
        joincount: "0",
        authcount: "0",
        ordercount: "0",
        ordermoney: "0",
      },
      list: [{ name: "推广用户" }, { name: "推广订单" }],
    };
  },
  components: {
    UserList,
    OrderList,
  },
  onLoad(e) {
    this.channelID = e.id;
  },
  methods: {
    changeTab(val) {
      this.tabCurrent = val.index;
    },
  },
};
</script>

<style lang="scss">
.head {
  overflow: scroll;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #ddd;

  flex-direction: column;

  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}
.title-border {
  font-size: 26rpx;
}

.table {
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin: 8px;
  border-radius: 8px;

  height: calc(100vh - 260rpx);
  overflow: hidden;
}

.flex {
  display: flex;
}
.just-b {
  justify-content: space-between;
}
.w-50 {
  width: 50%;
}
</style>
